
 <!DOCTYPE HTML>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  
    <title>Markdown 语法说明 | Yuan</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    
    <meta name="author" content="Luo Yuan">
    

    
    <meta name="description" content="Markdown是一种标记语言，主要用于网页上文本格式设置。它的使得我们可以使用普通的文本编辑器编辑网页文本。在页面显示用Markdown语法的文本，需要先转换为HTML格式再进行显示。Markdown使得普通文本和网页文本通过一种简单的格式关联了起来，文本编辑者不在需要了解复杂的HTML标签。同时，你也可以在Markdown格式的文本中使用HTML标签，这样可以补全一些Markdown语法不具备">
<meta property="og:type" content="article">
<meta property="og:title" content="Markdown 语法说明">
<meta property="og:url" content="http://luoyuan800.github.io/2015/07/07/Markdown/index.html">
<meta property="og:site_name" content="Yuan">
<meta property="og:description" content="Markdown是一种标记语言，主要用于网页上文本格式设置。它的使得我们可以使用普通的文本编辑器编辑网页文本。在页面显示用Markdown语法的文本，需要先转换为HTML格式再进行显示。Markdown使得普通文本和网页文本通过一种简单的格式关联了起来，文本编辑者不在需要了解复杂的HTML标签。同时，你也可以在Markdown格式的文本中使用HTML标签，这样可以补全一些Markdown语法不具备">
<meta property="og:locale">
<meta property="og:image" content="http://7xk7ce.com1.z0.glb.clouddn.com/head.png">
<meta property="og:image" content="http://7xk7ce.com1.z0.glb.clouddn.com/head.png">
<meta property="article:published_time" content="2015-07-07T02:51:34.000Z">
<meta property="article:modified_time" content="2021-05-27T06:01:52.053Z">
<meta property="article:author" content="Luo Yuan">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://7xk7ce.com1.z0.glb.clouddn.com/head.png">

    
    <link rel="alternative" href="/atom.xml" title="Yuan" type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/jacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
    
    
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/%02.css">
<link rel="stylesheet" href="/.css">

<meta name="generator" content="Hexo 5.4.0"></head>

  <body>
    <header>
      
<div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/logo.png" alt="Yuan" title="Yuan"/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="Yuan">Yuan</a></h1>
				<h2 class="blog-motto">一点一滴，积累技术</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="Menu">
			</a></div>
			<nav class="animated">
				<ul>
					<ul>
					 
						<li><a href="/">Home</a></li>
					
						<li><a href="/archives">Archives</a></li>
					
						<li><a href="/about">About</a></li>
					
					<li>
 					
					<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
						<label>Search</label>
						<input type="search" id="search" name="q" autocomplete="off" maxlength="20" placeholder="Search" />
						<input type="hidden" name="q" value="site:luoyuan800.github.io">
					</form>
					
					</li>
				</ul>
			</nav>			
</div>
    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
  
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2015/07/07/Markdown/" title="Markdown 语法说明" itemprop="url">Markdown 语法说明</a>
  </h1>
  <p class="article-author">By
       
		<a href="/about" title="Luo Yuan" target="_blank" itemprop="author">Luo Yuan</a>
		
  <p class="article-time">
    <time datetime="2015-07-07T02:51:34.000Z" itemprop="datePublished"> Published 2015-07-07</time>
    
  </p>
</header>
	<div class="article-content">
		
		<div id="toc" class="toc-article">
			<strong class="toc-title">Contents</strong>
		
			<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8Markdown"><span class="toc-number">1.</span> <span class="toc-text">我为什么要用Markdown</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">标题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A0%87%E9%A2%981"><span class="toc-number"></span> <span class="toc-text">标题1</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%982"><span class="toc-number">1.</span> <span class="toc-text">标题2</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%87%E9%A2%983"><span class="toc-number">1.1.</span> <span class="toc-text">标题3</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E9%A2%984"><span class="toc-number">1.1.1.</span> <span class="toc-text">标题4</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%87%E9%A2%985"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">标题5</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%A0%87%E9%A2%986"><span class="toc-number">1.1.1.1.1.</span> <span class="toc-text">标题6</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E6%A0%BC%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">文字格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E5%9D%97"><span class="toc-number">3.</span> <span class="toc-text">文本块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E6%96%87%E6%9C%AC%E5%9D%97"><span class="toc-number">3.1.</span> <span class="toc-text">引用文本块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E5%9D%97"><span class="toc-number">3.2.</span> <span class="toc-text">代码块</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC"><span class="toc-number">4.</span> <span class="toc-text">表格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B6%85%E9%93%BE%E6%8E%A5"><span class="toc-number">5.</span> <span class="toc-text">超链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E7%89%87"><span class="toc-number">6.</span> <span class="toc-text">图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span class="toc-number">7.</span> <span class="toc-text">特殊字符</span></a></li></ol>
		
		</div>
		
		<p>Markdown是一种标记语言，主要用于网页上文本格式设置。它的使得我们可以使用普通的文本编辑器编辑网页文本。在页面显示用Markdown语法的文本，需要先转换为HTML格式再进行显示。Markdown使得普通文本和网页文本通过一种简单的格式关联了起来，文本编辑者不在需要了解复杂的HTML标签。同时，你也可以在Markdown格式的文本中使用HTML标签，这样可以补全一些Markdown语法不具备的功能，比如文字的显示颜色。<br>本文中不会对Markdown语法转换原理和转换后的HTML标签进行说明，只会列举Markdown的格式显示效果。</p>
<span id="more"></span>

<h2 id="我为什么要用Markdown"><a href="#我为什么要用Markdown" class="headerlink" title="我为什么要用Markdown"></a>我为什么要用Markdown</h2><p>因为我搭建的博客支持使用Markdown来构建博文，并且Markdown作为一种标记语言学习简单，而且作为程序员，使用标记语言来写作会更加符合那种高逼格与众不同的形象~</p>
<h2 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h2><p>Markdown中的标题使用<code>#</code>进行标识， Markdown支持六级标题，标题1可以作为文本题目的显示，标题2后会跟一个下划线（HEXO搭建的博客支持Markdown语法写的文本，并且会根据标题格式生成博文目录，不过只会支持从标题2开始的标题）。</p>
<h1 id="标题1"><a href="#标题1" class="headerlink" title="标题1"></a>标题1</h1><h2 id="标题2"><a href="#标题2" class="headerlink" title="标题2"></a>标题2</h2><h3 id="标题3"><a href="#标题3" class="headerlink" title="标题3"></a>标题3</h3><h4 id="标题4"><a href="#标题4" class="headerlink" title="标题4"></a>标题4</h4><h5 id="标题5"><a href="#标题5" class="headerlink" title="标题5"></a>标题5</h5><h6 id="标题6"><a href="#标题6" class="headerlink" title="标题6"></a>标题6</h6><p>以上文本的显示效果为</p>
<p><img src="http://7xk7ce.com1.z0.glb.clouddn.com/head.png"></p>
<h2 id="文字格式"><a href="#文字格式" class="headerlink" title="文字格式"></a>文字格式</h2><ul>
<li><p>斜体。<code>*斜体*</code> 显示为 <em>斜体</em></p>
</li>
<li><p>粗体。<code>**粗体**</code> 显示为 <strong>粗体</strong></p>
</li>
</ul>
<h2 id="文本块"><a href="#文本块" class="headerlink" title="文本块"></a>文本块</h2><h3 id="引用文本块"><a href="#引用文本块" class="headerlink" title="引用文本块"></a>引用文本块</h3><p>强调引用的文本格式是一个文本块，使用&gt;开头的文本会被显示为文本块</p>
<blockquote>
<p>这是一个<br>引用的文本<br>会被显示为<br>这是一个<br>引用的文本</p>
</blockquote>
<h3 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h3><p>代码块有三种</p>
<ul>
<li>一种是插入到文本中的<code>这是一小节代码</code>，使用的格式为</li>
</ul>
<p><code>这是一小节代码</code></p>
<ul>
<li>一种是一整段的代码，这个整段代码的格式和特殊字符都会保留而不会被转换。每一行的文本前面增加缩进可以实现代码块的显示，可以缩进一个，也可以缩进两个。</li>
</ul>
<p>&lt;Tab缩进&gt;public CmdLineDiskMetrics(AbstractUnixCollector execWrapper, LogService logService,<br>&lt;Tab缩进&gt;                          UnixAgentPropertyWrapper properties) {<br>&lt;Tab缩进&gt;mExecWrapper = execWrapper;<br>&lt;Tab缩进&gt;mLogger = logService.getLogger(CmdLineDiskMetrics.class);<br>&lt;Tab缩进&gt;mStringUtils = new StringUtils(logService, CmdLineDiskMetrics.class.getName());<br>&lt;Tab缩进&gt;mProperties = properties;<br>&lt;Tab缩进&gt;mIsDebugEnable = mLogger.getDebugLevel() &gt;= 1;<br>&lt;Tab缩进&gt;<br>&lt;Tab缩进&gt;mHostResolver = new HostNameResolver(logService, execWrapper.getServices().getResolverService());<br>&lt;Tab缩进&gt;}<br>会被显示成</p>
<p>public CmdLineDiskMetrics(AbstractUnixCollector execWrapper, LogService logService,<br>                      UnixAgentPropertyWrapper properties) {<br>mExecWrapper = execWrapper;<br>mLogger = logService.getLogger(CmdLineDiskMetrics.class);<br>mStringUtils = new StringUtils(logService, CmdLineDiskMetrics.class.getName());<br>mProperties = properties;<br>mIsDebugEnable = mLogger.getDebugLevel() &gt;= 1;</p>
<p>mHostResolver = new HostNameResolver(logService, execWrapper.getServices().getResolverService());<br>}</p>
<ul>
<li>命令行格式的代码需要使用bash格式来显示，这样的格式会在每一条命令前面加上序号</li>
</ul>
<p>````bash<br>$ commond1<br>$ commond2<br>````<br>会显示成</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ commond1</span><br><span class="line">$ commond2</span><br></pre></td></tr></table></figure>

<h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h2><p>Markdown中使用形象的格式来表示表格（表格和上一个文本之间需要有一个空行分隔）</p>
<p>|标题1|标题2|<br>|—–|—–| #这一行是用来定义表格的对齐方式的<br>|第一格|第二格|<br>|第三格|第四格|</p>
<p>会显示一个如下的表格</p>
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody><tr>
<td>第一格</td>
<td>第二格</td>
</tr>
<tr>
<td>第三格</td>
<td>第四格</td>
</tr>
</tbody></table>
<p>表格的对齐方式是通过表格标题下方的第二行|—-|—–|来定义的</p>
<ul>
<li><code>----</code>表示左对齐</li>
<li><code>-----：</code>表示右对齐</li>
<li><code>：----：</code>表示居中对齐</li>
</ul>
<h2 id="超链接"><a href="#超链接" class="headerlink" title="超链接"></a>超链接</h2><p>定义一个超链接使用一下格式</p>
<p><a href="http://luoyuan800.github.io/" title="Yuan-Blog">Yuan</a><br>[]内的是要显示的文本，而()的前半部分是连接的地址，后半部分则是鼠标移动到链接上面要显示的内容。<br>最后的显示结果为 <a href="http://luoyuan800.github.io/" title="Yuan-Blog">Yuan</a></p>
<h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h2><p>图片的格式和超链接是一样的，不同的地方是，在[]要留空，之后的()中只需要填入图片的网址即可</p>
<p><img src="http://7xk7ce.com1.z0.glb.clouddn.com/head.png"></p>
<h2 id="特殊字符"><a href="#特殊字符" class="headerlink" title="特殊字符"></a>特殊字符</h2><p>如果要正常显示特殊字符，需要在其前面使用<code>\</code>标识，这样的话特殊字符就不会被转换。特殊字符包括：</p>
<p>!<br>`</p>
<blockquote>
</blockquote>
<p><br>&lt;<br>[<br>]<br>(<br>)<br>*<br>+<br>-<br>_<br>.</p>
<p>如果是要同时显示括号的话只需要在后一个括号前面加上<code>\</code> 如：</p>
<p>()  [] &lt;&gt; </p>
<p>会显示成<br>() [] &lt;&gt;</p>
  
	</div>
		<footer class="article-footer clearfix">
<div class="article-catetags">

<div class="article-categories">
  <span></span>
  <a class="article-category-link" href="/categories/%E7%BD%91%E7%AB%99-%E5%BC%80%E5%8F%91/">网站-开发</a>
</div>


</div>



	<div class="article-share" id="share">
	
	  <div data-url="http://luoyuan800.github.io/2015/07/07/Markdown/" data-title="Markdown 语法说明 | Yuan" data-tsina="" class="share clearfix">
	  </div>
	
	</div>


</footer>

   	       
	</article>
	
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2015/07/10/Linux-partition/" title="Linux的分区">
  <strong>上一篇：</strong><br/>
  <span>
  Linux的分区</span>
</a>
</div>


<div class="next">
<a href="/2015/07/06/log4j-extend/"  title="Log4J中的继承关系">
 <strong>下一篇：</strong><br/> 
 <span>Log4J中的继承关系
</span>
</a>
</div>

</nav>

	



</div>  
      <div class="openaside"><a class="navbutton" href="#" title="Show Sidebar"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">Contents</strong>
 
 <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8Markdown"><span class="toc-number">1.</span> <span class="toc-text">我为什么要用Markdown</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">标题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A0%87%E9%A2%981"><span class="toc-number"></span> <span class="toc-text">标题1</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%982"><span class="toc-number">1.</span> <span class="toc-text">标题2</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%87%E9%A2%983"><span class="toc-number">1.1.</span> <span class="toc-text">标题3</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E9%A2%984"><span class="toc-number">1.1.1.</span> <span class="toc-text">标题4</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%87%E9%A2%985"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">标题5</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%A0%87%E9%A2%986"><span class="toc-number">1.1.1.1.1.</span> <span class="toc-text">标题6</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E6%A0%BC%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">文字格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E5%9D%97"><span class="toc-number">3.</span> <span class="toc-text">文本块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E6%96%87%E6%9C%AC%E5%9D%97"><span class="toc-number">3.1.</span> <span class="toc-text">引用文本块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E5%9D%97"><span class="toc-number">3.2.</span> <span class="toc-text">代码块</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC"><span class="toc-number">4.</span> <span class="toc-text">表格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B6%85%E9%93%BE%E6%8E%A5"><span class="toc-number">5.</span> <span class="toc-text">超链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E7%89%87"><span class="toc-number">6.</span> <span class="toc-text">图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span class="toc-number">7.</span> <span class="toc-text">特殊字符</span></a></li></ol>
 
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="Hide Sidebar"></a></div>
<aside class="clearfix">

  


  
<div class="categorieslist">
	<p class="asidetitle">Categories</p>
		<ul>
		
		  
			<li><a href="/categories/杂物-医学/" title="杂物-医学">杂物-医学<sup>1</sup></a></li>
		  
		
		  
			<li><a href="/categories/编程-Java/" title="编程-Java">编程-Java<sup>13</sup></a></li>
		  
		
		  
			<li><a href="/categories/编程-Linux-Unix/" title="编程-Linux/Unix">编程-Linux/Unix<sup>4</sup></a></li>
		  
		
		  
			<li><a href="/categories/编程-工具/" title="编程-工具">编程-工具<sup>4</sup></a></li>
		  
		
		  
			<li><a href="/categories/编程-网络协议/" title="编程-网络协议">编程-网络协议<sup>1</sup></a></li>
		  
		
		  
			<li><a href="/categories/网站-开发/" title="网站-开发">网站-开发<sup>2</sup></a></li>
		  
		
		</ul>
</div>


  

  <div class="linkslist">
  <p class="asidetitle">Links</p>
    <ul>
        
          <li>
            
            	<a href="https://coderq.com" target="_blank" title="一个面向程序员交流分享的新一代社区">码农圈</a>
            
          </li>
        
          <li>
            
            	<a href="http://wuchong.me" target="_blank" title="Jark&#39;s Blog">Jark&#39;s Blog</a>
            
          </li>
        
    </ul>
</div>

  


  <div class="rsspart">
	<a href="/atom.xml" target="_blank" title="rss">RSS</a>
</div>

  <div class="weiboshow">
  <p class="asidetitle">Weibo</p>
    <iframe width="100%" height="119" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=119&fansRow=2&ptype=1&speed=0&skin=9&isTitle=1&noborder=1&isWeibo=0&isFans=0&uid=&verifier=&dpc=1"></iframe>
</div>


</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	<div class="line">
		<span></span>
		<div class="author"></div>
	</div>
	
	
	<section class="info">
		<p> Hello ,I&#39;m Luo Yuan in Zhuhai. <br/>
			Here is my place for knowledge accumulation.</p>
	</section>
	 
	<div class="social-font" class="clearfix">
		
		
		
		
		
		
		
		
		
		
	</div>
			
		

		<p class="copyright">
		Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/wuchong/jacman" target="_blank" title="Jacman">Jacman</a> © 2021 
		
		<a href="/about" target="_blank" title="Luo Yuan">Luo Yuan</a>
		
		
		</p>
</div>
</footer>
    <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<script src="/js/jquery.qrcode-0.12.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
  
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else{
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  c.click(function(){
    ta.css('display', 'block').addClass('fadeIn');
  });
  o.click(function(){
    ta.css('display', 'none');
  });
  $(window).scroll(function(){
    ta.css("top",Math.max(140,320-$(this).scrollTop()));
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(){ 
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina'),
      description = $this.attr('description');
  var html = [
  '<div class="hoverqrcode clearfix"></div>',
  '<a class="overlay" id="qrcode"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="微信"></a>',
  '<a href="http://widget.renren.com/dialog/share?resourceUrl=' + encodedUrl + '&srcUrl=' + encodedUrl + '&title=' + title +'" class="article-share-renren" target="_blank" title="人人"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="微博"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);

  $('.hoverqrcode').hide();

  var myWidth = 0;
  function updatehoverqrcode(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
    var qrsize = myWidth > 1024 ? 200:100;
    var options = {render: 'image', size: qrsize, fill: '#2ca6cb', text: url, radius: 0.5, quiet: 1};
    var p = $('.article-share-qrcode').position();
    $('.hoverqrcode').empty().css('width', qrsize).css('height', qrsize)
                          .css('left', p.left-qrsize/2+20).css('top', p.top-qrsize-10)
                          .qrcode(options);
  };
  $(window).resize(function(){
    $('.hoverqrcode').hide();
  });
  $('.article-share-qrcode').click(function(){
    updatehoverqrcode();
    $('.hoverqrcode').toggle();
  });
  $('.article-share-qrcode').hover(function(){}, function(){
      $('.hoverqrcode').hide();
  });
});   
</script>











<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
}); 
</script>



<!-- Analytics Begin -->



<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?e6d1f421bbc9962127a50488f9ed37d1";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>



<!-- Analytics End -->

<!-- Totop Begin -->

	<div id="totop">
	<a title="Back to Top"><img src="/img/scrollup.png"/></a>
	</div>
	<script src="/js/totop.js"></script>

<!-- Totop End -->

<!-- MathJax Begin -->
<!-- mathjax config similar to math.stackexchange -->


<!-- MathJax End -->

<!-- Tiny_search Begin -->

<!-- Tiny_search End -->

  </body>
</html>
